<!-- NOTIFICATIONS -->
<div *ngIf="notificationBody && hasNotification" class="bg-secondary">
    <div class="container py-3">
        <div [innerHtml]="notificationDisplay" class="notification-container mb-3"></div>
        <a *ngIf="notificationBody.length > notificationCharLimit" href="javascript:;;" class="bold" (click)="showFullNotification = !showFullNotification">{{ showFullNotification ? 'View Less' : 'View More' }}</a>
    </div>
</div>

<div class="bg-primary pt-5">
    <div class="container pt-5">
        <h1 class="text-white">{{ greeting }}</h1>
        <p class="h3 subGreeting text-white">Explore our in-depth research and analysis on ~{{ numCompanies | number }} companies</p>
        <div class="row">
            <div class="col-md-8">
                <app-company-search [searchType]="searchType"></app-company-search>
            </div>
        </div>
    </div>
</div>

<div class="bg-primary-half">
    <div class="container">
        <div class="row py-5">
            <div class="col-md-4">
                <h4>Research and Ratings</h4>
                <div class="card main shadow">
                    <div class="card-body">
                        <ul class="list-group list-group-flush">
                            <li [routerLink]="['/research', 'risk']" class="d-flex list-group-item pointer">
                                <div class="mr-auto">ESG Risk Rating <span class="badge badge-medium-grey text-body ml-2">NEW</span></div>
                                <div class="ml-auto"><i *ngIf="!productPermissions?.riskrating" class="ti-lock mr-2"></i></div>
                            </li>
                            <li [routerLink]="['/research', 'esg']" class="d-flex list-group-item pointer">
                                <div class="mr-auto">ESG Rating</div>
                                <div class="ml-auto"><i *ngIf="!productPermissions?.esg" class="ti-lock mr-2"></i></div>
                            </li>
                            <li [routerLink]="['/research', 'controversies']" class="d-flex list-group-item pointer">
                                <div class="mr-auto">Controversies</div>
                                <div class="ml-auto"><i *ngIf="!productPermissions?.controversies" class="ti-lock mr-2"></i></div>
                            </li>
                            <li [routerLink]="['/research', 'corporategovernance']" class="d-flex list-group-item pointer">
                                <div class="mr-auto">Corporate Governance</div>
                                <div class="ml-auto"><i *ngIf="!productPermissions?.governance" class="ti-lock mr-2"></i></div>
                            </li>
                            <li [routerLink]="['/research', 'sustainableproducts']" class="d-flex list-group-item pointer">
                                <div class="mr-auto">Sustainable Products</div>
                                <div class="ml-auto"><i *ngIf="!productPermissions?.sustainableproducts" class="ti-lock mr-2"></i></div>
                            </li>
                            <li [routerLink]="['/research', 'productinvolvement']" class="d-flex list-group-item pointer">
                                <div class="mr-auto">Product Involvement</div>
                                <div class="ml-auto"><i *ngIf="!productPermissions?.productinvolvement" class="ti-lock mr-2"></i></div>
                            </li>
                            <li [routerLink]="['/research', 'globalcompact']" class="d-flex list-group-item pointer">
                                <div class="mr-auto">Global Compact</div>
                                <div class="ml-auto"><i *ngIf="!productPermissions?.globalcompact" class="ti-lock mr-2"></i></div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-md-4 sm-col">
                <h4>Screening and Reporting</h4>
                <div class="card main shadow">
                    <div class="card-body">
                        <ul class="list-group list-group-flush">
                            <li routerLink="/tools/0" class="list-group-item pb-4 pointer">
                                Screening
                                <p class="card-text">Quickly and easily create custom screens and reports based on your investment mandate or philosophy</p>
                            </li>
                            <li routerLink="/tools/1" class="list-group-item pt-4 pointer">
                                Reporting
                                <p class="card-text">Create custom Excel and .csv reports using our full range of research and analysis with the report
                                    generation tool</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-md-4 sm-col">
                <h4>Portfolios Management and Monitoring</h4>
                <div class="card main shadow">
                    <div class="card-body">
                        <p>Your Portfolios</p>
                        <div *ngIf="portfolios && portfolios.length > 0">
                            <div *ngFor="let item of portfolios" class="item-link truncate">
                                <a [routerLink]="['/portfolios', 'edit', item.id]">{{ item.name }}</a>
                            </div>
                            <a [routerLink]="['/portfolios']" class="viewAll">View All</a>
                        </div>
                        <div *ngIf="!portfolios || portfolios.length === 0" class="text-center mt-5">
                            <img src="/assets/icons-svg/icon-portfolios.svg" width="52" height="50" />
                            <div class="mt-3">No Custom Portfolios created</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="bg-primary-light">
    <div class="container">
        <div class="d-flex h-100 flex-column">
            <div class="row pb-5">
                <div class="col-md-6 mb-5">
                    <h4>News</h4>
                    <div class="card shadow h-100">
                        <div class="card-body d-flex pb-0" [ngClass]="{'justify-content-center': !insights || insights.length === 0}">
                            <div *ngIf="insights && insights.length > 0">
                                <div *ngFor="let item of insights" class="mb-3 newsEvents">
                                    <a href="javascript:;;" (click)="loadInsight(item.id); insightModal.show();" class="text-link">{{ item.title }}</a>
                                    <div class="text-body-light">{{ item.datePublished | date:'mediumDate' }}</div>
                                </div>
                                <a [routerLink]="['/knowledge-center/news']" class="viewAll">View All</a>
                            </div>
                            <div *ngIf="!insights || insights.length === 0" class="text-center align-self-center">
                                <img src="/assets/icons-svg/icon-news.svg" width="64" height="50" />
                                <div class="my-3">No news feed at this time</div>
                                <div class="secondary-text">You can access sector, thematic and issue research in the<br /><a [routerLink]="['/knowledge-center/news']">Knowledge Center</a></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 sm-col mb-5">
                    <h4>Events</h4>
                    <div class="card shadow h-100">
                        <div class="card-body d-flex pb-0" [ngClass]="{'justify-content-center': !events || events.length === 0}">
                            <div *ngIf="events && events.length > 0">
                                <div *ngFor="let item of events" class="mb-3 newsEvents">
                                    <a href="javascript:;;" (click)="loadEvent(item.id); eventModal.show();" class="text-link">{{ item.name }}</a>
                                    <div class="text-body-light">{{ item.startDate | date:'mediumDate' }}<span *ngIf="item.startDate !== item.endDate"> - {{ item.endDate | date:'mediumDate' }}</span></div>
                                </div>
                                <a [routerLink]="['/knowledge-center/events']" class="viewAll">View All</a>
                            </div>
                            <div *ngIf="!events || events.length === 0" class="text-center align-self-center">
                                <img src="/assets/icons-svg/icon-events.svg" width="64" height="50" />
                                <div class="my-3">No Events feed at this time</div>
                                <div class="secondary-text">You can access sector, thematic and issue research in the<br /><a [routerLink]="['/knowledge-center/news']">Knowledge Center</a></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container mt-5">
    <div class="row">
        <div class="col">
            <h4>Other Available Research Products</h4>
            <div class="card shadow">
                <div class="card-body">

                    <div id="productsCarousel" class="carousel slide w-100" data-ride="carousel" data-interval="false">
                        <div class="carousel-inner w-100" role="listbox">
                            <div class="carousel-item active">
                                <div class="col-3">
                                    <div class="card research-product">
                                        <div class="card-body">
                                            <a href="https://www.sustainalytics.com/carbon-risk-rating/" target="_blank">
                                                <h5>Carbon Risk Rating</h5>
                                                <p class="card-text">
                                                    <br />Align your portfolio to the future low-carbon economy.</p>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="carousel-item">
                                <div class="col-3">
                                    <div class="card research-product">
                                        <div class="card-body">
                                            <a href="https://www.sustainalytics.com/controversial-weapons-radar" target="_blank">
                                                <h5 class="mb-4">Controversial Weapons Radar</h5>
                                                <p class="card-text">Identify and understand companies’ involvement in controversial 
                                                    weapons that can have a disproportionate and indiscriminate impact on civilian population.</p>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="carousel-item">
                                <div class="col-3">
                                    <div class="card research-product">
                                        <div class="card-body">
                                            <a href="https://www.sustainalytics.com/country-risk-research-and-rating" target="_blank">
                                                <h5>Country Risk Research and Ratings</h5>
                                                <p class="card-text">Compliment your traditional sovereign bond analysis to better understand reputational 
                                                        risks, long term economic prospects and creditworthiness.</p>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="carousel-item">
                                <div class="col-3">
                                    <div class="card research-product">
                                        <div class="card-body">
                                            <a href="https://www.sustainalytics.com/sanctions-research" target="_blank">
                                                <h5>Sanctions Research</h5>
                                                <p class="card-text">
                                                    <br />Identify countries in breach of UN, US and EU sanction criteria to manage
                                                        associated reputational and financial risks in your sovereign bond portfolio.</p>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="carousel-item">
                                <div class="col-3">
                                    <div class="card research-product">
                                        <div class="card-body">
                                            <a href="https://www.sustainalytics.com/arms-trade" target="_blank">
                                                <h5>Arms Trade Research</h5>
                                                <p class="card-text">
                                                    <br />Identify companies that sell arms to sanctioned countries or countries 
                                                        where there is a high risk of violence against civilians.</p>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="carousel-item">
                                <div class="col-3">
                                    <div class="card research-product">
                                        <div class="card-body">
                                            <a href="https://www.sustainalytics.com/human-rights-radar-country-risk" target="_blank">
                                                <h5>Human Rights Radar</h5>
                                                <p class="card-text">
                                                    <br />Identify and understand companies’ involvement in countries and territories 
                                                        where there is a high risk of human rights violations.</p>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="carousel-item">
                                <div class="col-3">
                                    <div class="card research-product">
                                        <div class="card-body">
                                            <a href="https://www.sustainalytics.com/sustainable-development-goals-analytics/" target="_blank">
                                                <h5>Sustainable Development Analytics</h5>
                                                <p class="card-text">
                                                    <br />Align your portfolio and holdings to the Sustainable Development Goals (SDGs).</p>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <a class="carousel-control-prev" href="#productsCarousel" role="button" data-slide="prev">
                            <img src="/assets/img/carousel-left.png" class="carousel-control-prev-icon" aria-hidden="true" />
                        </a>
                        <a class="carousel-control-next" href="#productsCarousel" role="button" data-slide="next">
                            <img src="/assets/img/carousel-right.png" class="carousel-control-next-icon" aria-hidden="true" />
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="mt-5 helpText">
        <span class="bold">First time user?</span>
        We encourage you to make use of the following guidance:
        <a (click)="accessOverview.show()" style="cursor: pointer;">
            <img src="/assets/icons-svg/icon-video.svg" class="home-icons ml-2" /> Video Tutorial
        </a>
    </div>
</div>

<!-- GA Overview Modal -->
<app-modal #accessOverview [id]="'accessOverview'" [size]="'modal-lg'" (displayed)="play(this.videoTutorial)" (hidden)="stop(this.videoTutorial)" [showCloseButton]="false">
    <div class="app-modal-header">
        Global Access Overview
    </div>
    <div class="app-modal-body">
        <video controls="controls" style="width: 100%" #videoTutorial>
            <source type="video/mp4" [src]="'https://globalaccess-tutorials.s3-eu-west-1.amazonaws.com/GA-Tutorial-Introduction.mp4'">
            <span title="No video playback capabilities, please download the video below">Global Access Overview</span>
        </video>
    </div>
    <div class="app-modal-footer">
        <button class="btn btn-transparent" (click)="stop(this.videoTutorial);accessOverview.hide();" >Close</button>
    </div>
</app-modal>

<app-modal #insightModal [id]="'insightModal'" (hidden)="selectedInsight = undefined" [size]="'modal-xl'">
    <div class="app-modal-body">
        <app-news-detail *ngIf="selectedInsight" [insight]="selectedInsight"></app-news-detail>
    </div>
</app-modal>

<app-modal #eventModal [id]="'eventModal'" (hidden)="selectedEvent = undefined" [size]="'modal-lg'">
    <div class="app-modal-body">
        <div *ngIf="selectedEvent">
            <h5 class="mb-0">{{ selectedEvent.name }}</h5>
            <div class="mt-4 mb-3 text-dark-grey">{{ selectedEvent.startDate | date:'mediumDate' }}<span *ngIf="selectedEvent.startDate !== selectedEvent.endDate"> - {{ selectedEvent.endDate | date:'mediumDate' }}</span></div>
            <div class="mt-3" [innerHtml]="selectedEvent.body"></div>
        </div>
    </div>
</app-modal>